<template>
  <div class="detail">
      <div class="row">
         <h2>{{details.name}}原材料</h2>
         <div class="material">
            <div v-for="mat in details.material" :key="mat.type">
                <span>{{mat.mname}}</span>
                <span>{{mat.amount}}</span>
            </div>     
         </div>
         <h3>烹饪时间： {{details.cookingtime}}</h3>
         <div class="step">
             <h4>步骤如下</h4>
            <div  v-for="(pro,i) in details.process" :key="pro.classid" class="s" > 
             <img :src="pro.pic" alt="">
             <p>{{i+1}}.{{pro.pcontent}}</p>           
            </div>
         </div>
         <div class="introduce">
                <img :src="details.pic" alt="">
                <h3>{{details.content}}</h3>
                <h2>特点： {{details.tag}}</h2>
         </div>
        
     </div>
  </div>
</template>
<script>
import {getFoodDetail} from '../service/foods'
export default {
  data() {
      return {
          id:'',
          details: '',
      }
  },
  created() {
      this.id = this.$route.query.id;
      getFoodDetail(this.id).then((res) => {
          this.details = res.data.result;
      })
  }
}
</script>
<style>
.detail{
    background: lightskyblue;
}
h2{
    text-align: center;
    margin: 0;
    color: white;
}
.material{
    width:50%;
    margin: 50px auto;
    display: flex;
    justify-content: space-around;
    color: orangered;
}
h3{
    text-align: center;
}
h4{
    text-align: center;
}
.step{
    width: 60%;
    margin: 0 auto;
}
 img {
    display: block;
    width: 20%;
    margin: 0 auto;
}
.step p{
    width: 100px;
    margin: 50px auto;
    text-align: left;
}
</style>


